昨天提到了在 View 後面加上 modifier 之後，他的類型就會跟著改變，變成 some View 一種開發者不需要知道具體類型的 View 類型。

所以今天要在這個觀念上來說明一下 SwiftUI 的畫面是如何處理的。

modifier 的位置

首先就來說一下 modifier 的特性，昨天提到，每次加上一個 modifier 之後，它會回傳一個 some View 的類型。所以每次加上 modifier 都是在對前一行的 modifier 回傳的 View 做處理。

那這樣 modifier 的位置就很重要了。

來看看實際效果：

這裡先將 VStack 的背景顏色設成紅色的，然後在設定它的最大高度為無限，可以看到紅色的還是只有中間那一小塊。

那把兩個 modifier 互換位置會發生什麼事？

可以看到紅色的地方變得跟螢幕一樣高了。

View 的排版

接下來說明一下 SwiftUI 的 View 是如何排版的，大概分成這幾步驟：

1. 上層的 View 會告訴下層的 View 自己有多少空間，並詢問下層的 View 要多少空間。
2. 下層的 View 回應自己想要的大小，下層 View 可以無視上層的提供的空間，任意要求。
3. 上層 View 收到要求，根據自身的排版規則分配下層 View 的位置。

以及，每種 View 對空間的要求都不太一樣，大致可以分成三類：

1. hugging：知道自己需要多少空間
2. neutral：根據自己底層的 View 決定 
3. expanding：有多少拿多少

例如 Text 就是屬於 hugging 的，然後 Button 就是 neutral，因為 Button 會去看自己下層的 View 的大小來決定 Button 自己要有多大，而像是 Color 就是 expanding 的。

而且每個 View 的 x 軸和 y 軸對空間的要求也不一定相同。

來實際操作一下：

透過 .border(.black) 可以看到 Button 的大小，可以發現 Button 的大小跟裡面的 Text 大小是一樣的，而 Text 的大小跟文字是一樣的。

那我們對 Text 加些 modifier 來看看效果。

這裡將 Text 的寬度調成無限，也就是跟螢幕同寬，會發現 Button 變得跟 Text 一樣寬，這裡就能看到 Button 的大小是看他下層的 View 的大小來決定。

那今天關於 View 的排版規則就到這裡，明天會來介紹一些可以協助你排版的特殊的 View。